<template>
  <div class="interactive-classroom">
    <!-- 顶部搜索和操作区 -->
    <div class="top-actions">
      <div class="search-area">
        <select class="select-box">
          <option value="">请选择班级</option>
        </select>
        <input type="text" class="search-input" placeholder="请输入课堂名称">
        <select class="select-box">
          <option value="">状态</option>
        </select>
        <button class="refresh-btn">重置</button>
      </div>
      <button class="new-class-btn">新建课堂</button>
    </div>

    <!-- 课堂列表 -->
    <div class="class-list">
      <table class="class-table">
        <thead>
          <tr>
            <th>课堂名称</th>
            <th>发布班级</th>
            <th>状态</th>
            <th>授课教师</th>
            <th>上课时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>课堂2024/12/04</td>
            <td>默认班级</td>
            <td><span class="status not-started">未开始</span></td>
            <td>田思泽</td>
            <td>2024-12-04 16:23</td>
            <td class="actions">
              <button class="action-btn">复制</button>
              <button 
                class="action-btn"
                @click="openClassroom"
              >
                进入课堂
              </button>
              <button class="action-btn">发布试题</button>
              <button class="action-btn">编辑</button>
              <button class="action-btn">删除</button>
            </td>
          </tr>
          <tr>
            <td>课堂2024/12/01</td>
            <td>默认班级</td>
            <td><span class="status in-progress">进行中</span></td>
            <td>田思泽</td>
            <td>2024-12-01 20:17</td>
            <td class="actions">
              <button class="action-btn">复制</button>
              <button 
                class="action-btn"
                @click="openClassroom"
              >
                进入课堂
              </button>
              <button class="action-btn">发布试题</button>
              <button class="action-btn">编辑</button>
              <button class="action-btn">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 在新标签页打开课堂
const openClassroom = () => {
  const fullPath = `${window.location.origin}/classroom`
  window.open(fullPath, '_blank')
}
</script>

<style scoped>
.interactive-classroom {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
}

.top-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-area {
  display: flex;
  gap: 12px;
}

.select-box {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 120px;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 200px;
}

.refresh-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.new-class-btn {
  padding: 8px 16px;
  background-color: #4169e1;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.class-table {
  width: 100%;
  border-collapse: collapse;
}

.class-table th,
.class-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.class-table th {
  background-color: #f5f7fa;
  font-weight: normal;
  color: #666;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status.not-started {
  background-color: #fff7e6;
  color: #fa8c16;
}

.status.in-progress {
  background-color: #e6f7ff;
  color: #1890ff;
}

.actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 4px 8px;
  border: none;
  background: none;
  color: #4169e1;
  cursor: pointer;
  font-size: 14px;
}

.action-btn:hover {
  text-decoration: underline;
}
</style> 